<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Three.js 双摄像头示例</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
        #cameraB-view {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 300px;
            height: 200px;
            border: 2px solid white;
            background: #000;
        }
        #cameraB-label {
            position: absolute;
            bottom: 220px;
            right: 20px;
            color: white;
            background: rgba(0,0,0,0.5);
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="cameraB-label">小立方体摄像头视图</div>
    <div id="cameraB-view"></div>

    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script>
        // 主场景设置
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x333333);
        
        // 主摄像头 (cameraA) - 全屏显示
        const cameraA = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        cameraA.position.set(0, 10, 20);
        cameraA.lookAt(0, 0, 0);
        
        // 主渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        // 添加光源
        const ambientLight = new THREE.AmbientLight(0x404040);
        scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);
        
        // 添加地面网格
        const gridHelper = new THREE.GridHelper(20, 20, 0x888888, 0x444444);
        scene.add(gridHelper);
        
        // 创建16个均匀分布的圆锥
        const coneGeometry = new THREE.ConeGeometry(0.5, 2, 32);
        const coneMaterial = new THREE.MeshPhongMaterial({ color: 0x44aa88 });
        
        for (let i = 0; i < 16; i++) {
            const angle = (i / 16) * Math.PI * 2;
            const radius = 8;
            const cone = new THREE.Mesh(coneGeometry, coneMaterial);
            
            cone.position.x = Math.cos(angle) * radius;
            cone.position.z = Math.sin(angle) * radius;
            cone.position.y = 1;
            
            // 让圆锥指向中心
            cone.lookAt(0, 1, 0);
            // 调整旋转使圆锥底部朝下
            cone.rotateX(Math.PI / 2);
            
            scene.add(cone);
        }
        
        // 创建小立方体
        const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
        const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0xff6600 });
        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.y = 1;
        scene.add(cube);
        
        // 辅助摄像头 (cameraB) - 附加到小立方体上
        const cameraB = new THREE.PerspectiveCamera(60, 300 / 200, 0.1, 100);
        // 将摄像头放在立方体前方边缘
        cameraB.position.set(0, 1, 1.5);
        cameraB.lookAt(0, 1, 10); // 看向前方
        
        // 将摄像头添加到立方体，使其随立方体移动
        cube.add(cameraB);
        
        // 为cameraB创建单独的渲染器
        const cameraBRenderer = new THREE.WebGLRenderer({ antialias: true });
        cameraBRenderer.setSize(300, 200);
        document.getElementById('cameraB-view').appendChild(cameraBRenderer.domElement);
        
        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            
            // 旋转立方体
            cube.rotation.y += 0.01;
            
            // 渲染主视图
            renderer.render(scene, cameraA);
            
            // 渲染辅助摄像头视图
            cameraBRenderer.render(scene, cameraB);
        }
        
        animate();
        
        // 窗口大小调整
        window.addEventListener('resize', () => {
            cameraA.aspect = window.innerWidth / window.innerHeight;
            cameraA.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>